<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" language="java" %>
<c:set var="ctx" value="${pageContext.servletContext.contextPath}"/>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
            font-family: "microsoft yahei";
        }
        .logoPage .closeBtn{
            width:22px;
            margin-left:20px;
            margin-top:14px;
        }
        .logoPage .logoTitle{
            margin-top:22px;
            text-align: center;
            color:#2D3231;
            font-size:22px;
            margin-bottom:33px;
        }
        .logoPage .logoForm{
            padding:0 15px;
            position: relative;
        }
        .logoPage .logoForm input{
            outline: none;
            border:none;
            width:100%;
            border-bottom:1px solid rgba(45,50,49,0.06);
            display: block;
            height:60px;
            font-size:16px;
            color:#2D3231;
        }
        .logoPage .logoForm input:nth-of-type(2){
            margin-top:10px;
        }
        .logoPage .logoForm .getCodeBtn{
            color:#1CCC8C;
            font-size:16px;
            position:absolute;
            right:15px;
            top:91px;
        }
        .logoPage .logoForm .logoBtn{
            -webkit-appearance: none;
            background:#1CCC8C;
            color:#fff;
            font-size:16px;
            border-bottom:none;
            border-radius: 2px;
            margin-top:30px;
            height:50px;
        }
        .logoPage .logoForm input::-webkit-input-placeholder{
            color:rgba(45,50,49,0.2);
            font-size:16px;
        }
        .logoPage .logoForm input::-moz-placeholder{   /* Mozilla Firefox 19+ */
            color:rgba(45,50,49,0.2);
            font-size:16px;
        }
        .logoPage .logoForm input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
            color:rgba(45,50,49,0.2);
            font-size:16px;
        }
        .logoPage .logoForm input:-ms-input-placeholder{  /* Internet Explorer 10-11 */
            color:rgba(45,50,49,0.2);
            font-size:16px;
        }
        /*.geetest_holder.geetest_wind.geetest_fallback.geetest_ready,
        .geetest_holder.geetest_wind.geetest_fallback.geetest_detect{
            position:absolute;
            top:-10px;
        }
        .geetest_holder.geetest_wind .geetest_radar_btn,
        .geetest_holder.geetest_wind .geetest_radar_btn{
            background:transparent!important;
            border:none!important;
        }
        .geetest_radar_tip span{
            color:transparent;
        }
        .geetest_wait .geetest_wait_dot{
            color:transparent!important;
            background:transparent!important;
        }*/
    </style>

    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
</head>
<body>
    <div id='logoPage' class='logoPage' v-show="showApp" style="display:none">
        <img src="${ctx}/resources/inter/img/close.png" alt="" class='closeBtn' @click="closePage()"/>
        <div class='logoTitle'>快捷登录</div>
        <form action="" class='logoForm'>
            <input  class='phoneInput' type="text" placeholder='输入手机号码' v-model.trim='form.phone'/>
            <span style='color:red;font-size:12px;margin-top:5px;position:absolute;' v-if='showPhoneTip' v-text="phoneTip"></span>
            <input  class='checkInput' maxlength="20" placeholder='输入验证码' v-model.trim='form.checkCode'/>
            <span style='color:red;font-size:12px;margin-top:5px;position:absolute;' v-if="showCodeTip">请输入验证码</span>
            <div class='getCodeBtn' @click='startCheck'>
                <span v-if='afterGetMessage' v-html="timeCount+'s后重新获取'"></span>
                <span v-else>获取验证码</span>
            </div>
            <input type="button" class='logoBtn' value='登 录' @click='handleLogin'/>
        </form>
    </div>
</body>
<script src="https://cdn.bootcss.com/vue-resource/1.5.0/vue-resource.min.js"></script>
<script src="${ctx}/resources/inter/js/gt_1.0.0.js"></script>
<script>

    Vue.http.options.emulateJSON = true;
    Vue.http.interceptors.push(function (request, next) {
        request.headers.set('X-Requested-With', 'XMLHttpRequest');
        if (request.params) {
            request.params.t = new Date().getTime();
        }
        next(function (response) {
        });
    });

    new Vue({
        el:'#logoPage',
        mounted:function(){
            this.initCode();
        },
        watch:{
            'form.phone':function(value) {
                if(value === ''){
                    this.showPhoneTip = true;
                    this.phoneTip = '请输入手机号码';
                } else{
                    this.showPhoneTip = false;
                }
            },
            'form.checkCode':function(value) {
                if(value === ''){
                    this.showCodeTip = true;
                }else{
                    this.showCodeTip = false;
                }
            }
        },
        methods:{
            closePage() {
                window.history.go(-1);
            },
            handleLogin(){
                if(this.form.phone === ''){
                    this.showPhoneTip = true;
                    this.phoneTip = '请输入手机号码';
                } else if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.form.phone))) {
                    this.showPhoneTip = true;
                    this.phoneTip = '请输入正确的手机号码';
                } else{
                    this.showPhoneTip = false;
                }
                if(this.form.checkCode === '') {
                    this.showCodeTip = true;
                }
                if(this.showCodeTip || this.showPhoneTip){
                    return;
                }
                var params = {
                    client_id:'97d7c8d7418b49de8da45cac01615f3e',
                    client_secret:'fd225cc01f034b2d8c76f97190750664',
                    grant_type:'dynamic_password',
                    scope:'property_customer_app',
                    username:this.form.phone,
                    password:this.form.checkCode
                };
                console.log(params);
                this.$http.post('<%=basePath %>/oauth2/token',params).then(function(response){
                    console.log(response)
                    if(response.status === 200){
                        if(response.data.success){
                            var cookiesValue = response.data.data.access_token;
                            document.cookie = "access_token="+ cookiesValue + ";domain=.${cookieDomain};path=/";
                            window.location.href = "${redirectURL}";
                        } else {
                            alert("登录失败，请检查手机号或验证码");
                        }
                    }
                });
            },
            afterInitCode(captchaObj){
                var that = this;
                this.captchaObj = captchaObj;
                captchaObj.onSuccess(function(){
                    var result = captchaObj.getValidate();
                    if (!result) {
                        return;
                    }
                    var params = {
                        challenge: result.geetest_challenge,
                        mobile:that.form.phone,
                        seccode:result.geetest_seccode,
                        validate:result.geetest_validate
                    };
                    that.$http.post('<%=basePath %>/mi/login/verify.json',params).then(function(response){
                        if(response.status === 200){
                            if(JSON.parse(response.data.string).success){
                                console.log('验证成功');
                                that.afterGetMessage = true;
                                that.timeCount = 60;
                                var timer = setInterval(function(){
                                    if(that.timeCount > 0) {
                                        that.timeCount--;
                                    }else{
                                        clearInterval(timer);
                                        that.afterGetMessage = false;
                                    }
                                },1000)
                            }else{
                                alert('请重新获取验证码')
                            }
                        }
                    })
                })
            },
            initCode(){
                var that = this;
                this.$http.get('<%=basePath %>/mi/login/captcha.json').then(function(response){
                    var obj = response.data.data;
                    that.showApp = true;
                    initGeetest({
                        gt: obj.gt,
                        challenge: obj.challenge,
                        offline: !obj.success, // 表示用户后台检测极验服务器是否宕机
                        new_captcha: true, // 用于宕机时表示是新验证码的宕机
                        product: "bind", // 产品形式，包括：float，popup

                    },that.afterInitCode);
                });

            },
            startCheck(){
                this.showCodeTip = false;
                if(this.afterGetMessage) {
                    return;
                }
                if(this.form.phone === ''){
                    this.showPhoneTip = true;
                    this.phoneTip = '请输入手机号码';
                } else if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.form.phone))) {
                    this.showPhoneTip = true;
                    this.phoneTip = '请输入正确的手机号码';
                } else{
                    this.showPhoneTip = false;
                }
                if(this.showPhoneTip) {
                    return;
                }
                if(this.captchaObj.verify){
                    this.captchaObj.verify();
                }

            }
        },
        data:{
            showApp: false,
            timeCount:0,
            afterGetMessage: false,
            showPhoneTip:false,
            showCodeTip:false,
            phoneTip: '请输入手机号码',
            captchaObj:{},
            form:{
                phone:'',
                checkCode:'',
            }
        }
    });
</script>
</html>
